import React from 'react';
import tools from '../../common/tools';

// {
//   name:'模板名称',
//   summary:'模板简介',
//   content:'模板文本'
// }
class Tpls extends React.Component {
    constructor(props){
        super();
        this.control=null;
        this.state={
            tpls:[],
            tpl_name:'',
            usetype:0 //0:编辑模板, 1:使用模板
        };

        this.btns=[
            {name:'取消', evt:'cancel'},
            {name:'打开', evt:'ok'}
        ];
        if(props.control!=undefined){
            this.initControl(props.control);
        }
        this.handleClick = this.handleClick.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }
    initControl(hooks){
        let that=this;
        this.control=hooks;
        this.control.addHook('show',function(data){
            that.getRemoteData();
            let params=data.params;
            if(params!=undefined){
                that.setState(params.state);
            }
            $('#g_tplsbox').modal('show');
        });
        this.control.addHook('hide',function(){
            $('#g_tplsbox').modal('hide');
        });
    }
    componentDidMount(){
        this.getRemoteData();
    }
    getRemoteData(){
        let that=this;
        $.getJSON(this.props.source+'&t='+new Date().getTime(), function(result) {
            let tpls=[{name:'选择模板',desc:'说明',value:''}];
            if(result.error===null){
                result.data.forEach(e=>{
                    tpls.push({name:e.name, desc:e.summary, value:e.id});
                });
            }
            that.setState({tpls:tpls});
        });
    }
    render(){
        let that=this;
        return (
            <div id="g_tplsbox" className="modal fade" style={{display:"none"}} >
                <div className="modal-dialog">
                    <div className="modal-content">
                    <div className="modal-header">
                        <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 className="modal-title">模板管理</h4>
                    </div>
                    <div className="modal-body">
                        <form className="form-horizontal">
                            <div className="form-group">
                                <label for="tpl_name" className="col-sm-2 control-label">选择模板</label>
                                <div className="col-sm-10">
                                    <select className="form-control" id="tpl_name" value={that.state.tpl_name} onChange={this.handleChange}>
                                        {
                                            this.state.tpls.map(e=>{
                                                return <option key={e.value} value={e.value}>{e.name}({e.desc})</option>
                                            })
                                        }
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div className="modal-footer">
                        {
                            this.btns.map(e=>{
                                let cls=tools.getBtnCls(e.evt);
                                return <button type="button" className={cls} key={e.evt} data-evt={e.evt} onClick={that.handleClick} >{e.name}</button>
                            })
                        }
                    </div>
                    </div>
                </div>
            </div>
        );
    }
    handleClick(e){
        let that=this;
        let evt=e.target.getAttribute('data-evt');
        if(this.state.tpl_name==''&&evt!=='cancel'){
            alert('请选择要打开的模板文件');
            return;
        }
        if(this.control!==null&&evt!=='cancel'){
            $.getJSON(this.props.detailsource+this.state.tpl_name, function(result) {
                if(result.error===null){
                    that.control.dispatch('callback',{data:result.data.content, type:that.state.usetype});
                }else{
                    alert('服务异常：'+result.error.text+'(错误码 '+result.error.code+')');
                }
            });
        }
        that.control.dispatch('hide');
    }
    handleChange(e){
        let that=this;
        let key=e.target.getAttribute('id');
        let filed={};
        filed[key]=e.target.value;
        this.setState(filed);
    }
    getTpl(key){
        for(let tpl of this.state.tpls){
            if(tpl.name===key) return tpl
        }
        return null
    }
}

export default Tpls;